<template>
    <div id="recharge">
        <van-cell-group inset class="mt20">
            <van-field v-model="rechargeInfo.money" center type="number" label-align="top" class="field-large" label="充值金额" placeholder="请输入充值金额">
                <template #extra>
                    <div class="icon-money">￥</div>
                </template>
            </van-field>
        </van-cell-group>
        <p class="con-wrap pay-select">付款方式</p>
        <van-radio-group v-model="rechargeInfo.type" class="mt10">
            <van-cell-group inset>
                <van-cell title="微信" clickable @click="rechargeInfo.type = 1">
                    <template #icon>
                        <img class="img-pay" src="/statics/home/images/pay-wx.png" />
                    </template>
                    <template #right-icon>
                        <van-radio :name="1" />
                    </template>
                </van-cell>
            </van-cell-group>
            <van-cell-group inset class="mt20">
                <van-cell title="支付宝" clickable @click="rechargeInfo.type = 2">
                    <template #icon>
                        <img class="img-pay" src="/statics/home/images/pay-alipay.png" />
                    </template>
                    <template #right-icon>
                        <van-radio :name="2" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>
        <div class="fixed-bottom">
            <div class="btn-1 btn-1-main" @click="toSubmit()">充值</div>
        </div>
    </div>
</template>


<script>
export default {
    name: 'Recharge',
    data() {
        return {
            rechargeInfo: {
                money: '',
                type: 1,
            },
        }
    },
    created() { },
    methods: {
        toSubmit(){
            this.$api.recharge.pay(this.rechargeInfo).then(res => {
                this.$router.push('/account/recharge/success/' + res.result.detail.id);
                console.log(res)
            }).finally(e => {});
        },
    }
}
</script>
